<template>
<div>
    <div class="setting-item" >
      <mu-paper :zDepth="2" class='user-list-paper'>
        <mu-row gutter>
          <mu-col desktop="30">
            <mu-avatar :size="90" src="/static/images/car.jpg"/>
          </mu-col>
          <mu-col desktop="70">
            <div class="item-head">图片的初始血量</div>
            <div class="flex-box">
              <mu-text-field v-model="blood" hintText="血量" type="number" class="blood-form" :underlineShow="true" />
              <mu-flat-button slot="actions" class="set-button" @click="changeBlood" label="确定"/>
            </div>
          </mu-col>
        </mu-row>
      </mu-paper>
    </div>

    <div class="setting-item" >
      <mu-paper :zDepth="2" class='user-list-paper'>
        <mu-row gutter>
          <mu-col desktop="30">
            <mu-avatar :size="90" src="/static/images/car.jpg"/>
          </mu-col>
          <mu-col desktop="70">
            <div class="item-head">图片的最高血量</div>
            <div class="flex-box">
              <mu-text-field v-model="maxBlood" hintText="最高血量" type="number" class="blood-form" :underlineShow="true" />
              <mu-flat-button slot="actions" class="set-button" @click="changeMaxBlood" label="确定"/>
            </div>
          </mu-col>
        </mu-row>
      </mu-paper>
    </div>

    <div class="setting-item" >
      <mu-paper :zDepth="2" class='user-list-paper'>
        <mu-row gutter>
          <mu-col desktop="30">
            <mu-avatar :size="90" src="/static/images/car.jpg"/>
          </mu-col>
          <mu-col desktop="70">
            <div class="item-head">分享图片增加血量</div>
            <div class="flex-box">
              <mu-text-field v-model="addBlood" hintText="增加血量" type="number" class="blood-form" :underlineShow="true" />
              <mu-flat-button slot="actions" class="set-button" @click="changeAddBlood" label="确定"/>
            </div>
          </mu-col>
        </mu-row>
      </mu-paper>
    </div>

    <div class="setting-item" >
      <mu-paper :zDepth="2" class='user-list-paper'>
        <mu-row gutter>
          <mu-col desktop="30">
            <mu-avatar :size="90" src="/static/images/car.jpg"/>
          </mu-col>
          <mu-col desktop="70">
            <div class="item-head">用户初始票数</div>
            <div class="flex-box">
              <mu-text-field v-model="ticket" hintText="票数" type="number" class="blood-form" :underlineShow="true" />
              <mu-flat-button slot="actions" class="set-button" @click="changeTicket" label="确定"/>
            </div>
          </mu-col>
        </mu-row>
      </mu-paper>
    </div>
    <div class="setting-item" >
      <mu-paper :zDepth="2" class='user-list-paper'>
        <mu-row gutter>
          <mu-col desktop="30">
            <mu-avatar :size="90" src="/static/images/car.jpg"/>
          </mu-col>
          <mu-col desktop="70">
            <div class="item-head">屏蔽历史记录(天)</div>
            <div class="flex-box">
              <mu-text-field v-model="banHistoryTime" hintText="票数" type="number" class="blood-form" :underlineShow="true" />
              <mu-flat-button slot="actions" class="set-button" @click="changeBanHistoryTime" label="确定"/>
            </div>
          </mu-col>
        </mu-row>
      </mu-paper>
    </div>
    
</div>
</template>
<script>
  import http from "../../http/http.js" 
  export default {
    data () {
      return {
        user_wechat_id:'',
        setBloodUrl:this.config.setBloodUrl,
        setMaxBloodUrl:this.config.setMaxBloodUrl,
        setAddBloodUrl:this.config.setAddBloodUrl,
        setTicketUrl:this.config.setTicketUrl,
        setBanHistoryTimeUrl: this.config.setBanHistoryTimeUrl,
        blood: 0,//图片初始血量
        maxBlood: 0,//图片最高血量
        addBlood: 0,//分享图片增加血量
        ticket: 0,//用户可用票数
        banHistoryTime: 0,//屏蔽用户最近几天内的历史记录
      }
    },
    components : {
    },
    methods: {
      redirect: function(){
        console.log(11111)
      },
      //更改图片初始血量
      changeBlood: function(){
        var that = this
        http.get(that.setBloodUrl,{
          params: {
            blood: that.blood
          }
        })
        .then(function(response){
          console.log(response)
          if(response.data.code == 200){
            console.log(response.data.msg)
          }
        })
        .catch(function(err){console.log(err)});
      },
      //更改图片最高血量
      changeMaxBlood: function(){
        var that = this
        http.get(that.setMaxBloodUrl,{
          params: {
            maxBlood: that.maxBlood
          }
        })
        .then(function(response){
          console.log(response)
          if(response.data.code == 200){
            console.log(response.data.msg)
          }
        })
        .catch(function(err){console.log(err)});
      },
      //分享图片增加血量
      changeAddBlood: function(){
        var that = this
        http.get(that.setAddBloodUrl,{
          params: {
            addBlood: that.addBlood
          }
        })
        .then(function(response){
          console.log(response)
          if(response.data.code == 200){
            console.log(response.data.msg)
          }
        })
        .catch(function(err){console.log(err)});
      },
      //更改用户初始票数
      changeTicket: function(){
        var that = this
        http.get(that.setTicketUrl,{
          params: {
            ticket: that.ticket
          }
        })
        .then(function(response){
          console.log(response)
          if(response.data.code == 200){
            console.log(response.data.msg)
          }
        })
        .catch(function(err){console.log(err)});
      },
      //屏蔽用户最近几天内的历史记录
      changeBanHistoryTime: function(){
        var that = this
        http.get(that.setBanHistoryTimeUrl,{
          params: {
            banHistoryTime: that.banHistoryTime
          }
        })
        .then(function(response){
          console.log(response)
          if(response.data.code == 200){
            console.log(response.data.msg)
          }
        })
        .catch(function(err){console.log(err)});
      },
      //判断是否为数字
      isNumber: function (value) { 
        //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 
　　　　var re = /^[0-9]+.?[0-9]*$/; 
    　　if (!re.test(value)) {
    　　　　return false;
    　　}
  　　　　return true;
  　　} 
    },
    mounted() {
      var that = this
      //设置图片初始血量
      http.get(that.setBloodUrl)
      .then(function(response){
        if(response.data.code == 200){
          that.blood = response.data.blood
        }
      })
      .catch(function(err){console.log(err)});
      //设置用户初始可用票数
      http.get(that.setTicketUrl)
      .then(function(response){
        if(response.data.code == 200){
          that.ticket = response.data.ticket
        }
      })
      .catch(function(err){console.log(err)});
      //设置图片最高血量
      http.get(that.setMaxBloodUrl)
      .then(function(response){
        console.log(response.data)
        if(response.data.code == 200){
          that.maxBlood = response.data.maxBlood
        }
      })
      .catch(function(err){console.log(err)});
      //分享图片增加血量
      http.get(that.setAddBloodUrl)
      .then(function(response){
        console.log(response.data)
        if(response.data.code == 200){
          that.addBlood = response.data.addBlood
        }
      })
      .catch(function(err){console.log(err)});
      //屏蔽用户最近几天内的历史记录
      http.get(that.setBanHistoryTimeUrl)
      .then(function(response){
        console.log(response.data)
        if(response.data.code == 200){
          that.banHistoryTime = response.data.banHistoryTime
        }
      })
      .catch(function(err){console.log(err)});
    },
  }
</script>

<style lang="css">
.item-head{
  padding-top:10px;
  font-size: 24px;
  color: #9CA3CD;
  min-height: 25px;
}
.flex-box{
  display: flex;
}
.blood-form{
  width:150px;
}
.setting-item{
  float: left;
  cursor: pointer;
  width: 333px;
}
.set-button{
  background: #82D842;
}
</style>